import React from 'react'
import { connect } from 'dva'
import { Form ,Modal,message,Upload,Button,Spin } from 'antd'
import { Link, hashHistory } from 'dva/router'
import config from 'config/config'
import $ from 'jquery'
import FlagBtn from 'widget/FlagBtn/FlagView'
import { mapStateToProps } from 'utils/view_utils'
import styles from './commissionsDistListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx=classnames.bind(styles);
const confirm = Modal.confirm;



const commissionsDistListView = function({dispatch, model, form}) {
  // 表单的子函数
  // const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  // modelObj.xxx获取model中状态机的值
  let {loading,submitFeikongLoading,backLoading,submitLoading,biz,products,id} = modelObj
 
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/commissionApply/list`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        pageSize:'10',
        pageNo:'1'
        },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'projectName',
            zh_name: '项目名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'documentNo',
            zh_name: '单据号',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'applyReason',
            zh_name: '申请事由',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'createTime',
            zh_name: '登记日期',
            elem_type: 'Date',
            format: 'YYYY-MM-DD',
            // query_format: "YYYY-MM-DD HH:mm:ss",   // 请求参数, 当请求参数和显示时格式不同可通过该参数区分
            // double: true,  // 日期范围组件 使用"YYYY-MM-DD HH:mm:ss"格式时, 显示不全时可使用该参数, 将占据两格位置
            split_keys: ['dmaketimeEnd', 'dmaketimeStrart'],
            elem_valid_type: 'string'
          },
          {
            en_name: 'flowState',
            zh_name: '流程单据状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
              {
                  value: '0',
                  label: '未提交'
               }, 
              {
                  value: '1',
                  label: '已审批'
              },
              {
                  value: '2',
                  label: '审批中'
              }
          ],
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 是否生效 项目名称  佣金方案名称 方案生效日期 方案失效日期 审批人 审批通过日期   提交人 提交日期  创建人 创建日期
      table:
        {
          rowSelectionInfo: {
            type: 'radio',
          },
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 2200},
          fields: [
            {
              en_name: "ruleNo",
              zh_name: "序号",
              width: 60,
              render: (a, item, index, d, e, f) => {
                return index+1
              },
            },
            {
              en_name: "projectName",
              zh_name: "项目名称",
            },
            {
              en_name: "applyReason",
              zh_name: "申请事由",
              width: 300
            },
            {
              en_name: "documentNo",
              zh_name: "单据号",
            },
            {
              en_name: "theAmount",
              zh_name: "本次结佣总额",
            },
            {
              en_name: "flowState",
              zh_name: "流程单据状态",
              render:(a, item, index, d, e, f)=>{
                if(item.flowState === 0){
                  return '未提交'
                }else if(item.flowState == 1){
                  return '已审批'
                }else if(item.flowState == 2){
                  return '审批中'
                }
              }
            },
            {
              en_name: "paymentStatus",
              zh_name: "佣金支付状态",
              render:(a, item, index, d, e, f)=>{
                if(item.paymentStatus == 0){
                  return '已支付'
                }else if(item.paymentStatus == 1){
                  return '未支付'
                }
              }
            },
            {
              en_name: "paymentTime",
              zh_name: "资金系统付款时间",
            },
            {
              en_name: "feesStatus",
              zh_name: "提交费控状态",
              render:(a, item, index, d, e, f)=>{
                if(item.feesStatus == 0){
                  return '未提交'
                }else if(item.feesStatus == 1){
                  return '已提交'
                }else if(item.feesStatus == 2){
                  return '提交失败'
                }
              }
            },
            {
              en_name: "endTime",
              zh_name: "签约归属截止日期",
              render:(a, item, index, d, e, f)=>{
                  return item.endTime.substring(0,10)
              }
            },
            {
              en_name: "createByName",
              zh_name: "登记人",
            },
            {
              en_name: "createTime",
              zh_name: "登记日期",
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:160,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                      <FlagBtn node={<a onClick={() => checkOrEditSkip('check',item)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                      <FlagBtn node={<a onClick={() => checkOrEditSkip('edit',item)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                      <FlagBtn node={<a onClick={() => deleteContent(item)}>删除</a>} btnId={''}> </FlagBtn>
                  </span>
                )
              },
            }
          ],
        },
      // 操作栏
      action_bar: [
        {
          label: "录入",
          type: "primary",
          onClick: (e) =>{
            hashHistory.push({
              pathname: '/home/commissions/commissionsDistListDetail',
              query: {}
            });
          }
        },
        {
          label: '导出',
          type: 'primary',
          onClick: (e, row) => {
            if(row.length<=0){
              message.warn('请选择一项你要选择的申请单')
              return
            }
            id = row[0].id
            baseFun(id,'down')
          }
        },
        {
          label: '检索',
          onClick: (e, row) => {
            onRetrieve()
          }
        },
        {
          label: "提交C3流程",
          type: "primary",
          rowSelection:[],
          loading: submitLoading,
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的申请单')
              return
            }
            if(row[0].flowState !==0){
              message.warn('只有未提交的方案才能提交审批')
              return
            }
            id = row[0].id
            baseFun(id,'submit3C')
          }
        },
        {
          label: "撤回",
          type: "primary",
          loading: backLoading,
          rowSelection:[],
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的申请单')
              return
            }
            if(!row[0].c3ProcessId){
              message.warn('没有相应的流程不能撤回')
              return false
            }
            id = row[0].id
            
            confirm({
              title: '撤回确认',
              content: '是否确定撤回？',
              okText: '确认',
              okType: 'primary',
              cancelText: '取消',
              onOk() {
                baseFun(id,'recall')
              },
              onCancel() {
                console.log('Cancel');
              },
            });
            // baseFun(id,'recall')
          }
        },
        {
          label: "查看流程详情",
          type: "primary",
          rowSelection:[],
          onClick: (e,row) =>{
            if(row.length<=0){
              message.warn('请选择一项你要选择的申请单')
              return
            }
            if(!row[0].c3ProcessId){
              message.warn('没有相应的流程不能查看')
              return false
            }
            id = row[0].c3ProcessId
            baseFun(id,'check')
          }
        },
        {
          label: "提交费控",
          type: "primary",
          rowSelection:[],
          loading: submitFeikongLoading,
          onClick: (e,row) =>{
            // 自定义点击事件，第二个参数rows为当rowSelection: '1'时，返回选中行的数据数组
            if(row.length<=0){
              message.warn('请选择一项你要选择的申请单')
              return
            }
            id = row[0].id
            baseFun(id,'submit')
          }
        }
      ]
    },
  }
  function onRetrieve(){
    $('.listSearchBox').toggle()
  }
  //查看，编辑
  function checkOrEditSkip(type,item){
    if(type == 'check'||(type == 'edit' && item.flowState === 0)){
      hashHistory.push({
        pathname: '/home/commissions/commissionsDistListDetail',
        query: {actionType: type, id:item.id }
      })
    }else{
      message.warn('只有未提交的申请单才能编辑')
    }
  }
  //删除
  function deleteContent(item){
    if(item.flowState === 0){
      id = item.id
      confirm({
        title: '删除确认',
        content: '您真的要删除此条申请单信息吗?',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          baseFun(id,'deleteContent')
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }else{
      message.warn('只有未提交的申请单才能删除')
    }
  }

  

  function baseFun(id,type){
    dispatch({
      type: `${namespace}/updateStore`,
      payload: { id }
    })
    dispatch({
      type: `${namespace}/${type}`,
      payload: {}
    })
  }
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
      {loading&&<div style={{position: "fixed",width: "100%",height: "100%",background: "rgba(204, 204, 204,.6)",zIndex: 9999999,top: "62px",textAlign: 'center',paddingTop:'200px',left:'168px'}}>
        <Spin tip="Loading..."></Spin>
      </div>}
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(commissionsDistListView))
